<script setup lang="ts">
import { ref } from 'vue'

const money = ref(100)
const buy = (price: number) => {
  money.value -= price
}
</script>
<template>
  <div id="app">
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button v-on:click="buy(3)">可乐3元</button>
      <button @click="buy(5)">牛奶5元</button>
      <!-- 注意：模板中的 ref 直接诶修改即可，【不能】写 .value -->
      <button @click="money -= 10">咖啡10元</button>
      <button @click="money--">罚款1元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
</template>
<style>
.box {
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 200px;
}

h3 {
  margin: 10px 0 20px 0;
}

p {
  margin: 20px;
}
</style>